• Montage 1

    Je pense avoir déjà proposé ce type de code mais je vais essayer de le faire simple pour pouvoir être adapté facilement.
    Survolez chaque vignette.

    Code.
    <div id="fd"><img id="p1" src="http://ekladata.com/5wyFtVahEu5qK7a-liYJEyOv7AQ/22.jpg" alt="" /><img id="p2" src="http://ekladata.com/3ox-pGphHiIH5ijYFD2Rx2F9iX4/53.jpg" alt="" /><img id="p3" src="http://ekladata.com/VyPV0gOShUbyK6po40pwffuAwSo/55.jpg" alt="" /><img id="p4" src="http://ekladata.com/vbScMKK-bagSc47MlrdZioRZ4S8/56.jpg" alt="" /><img id="p5" src="http://ekladata.com/B9y-GdshnxRdrAOT-8prLKXjNKw/79.jpg" alt="" /><img id="p6" src="http://ekladata.com/PZfeeV0v1YtNV-qmVm_gX4KHgpk/83.jpg" alt="" /></div>
    <style><!--
    #fd{ width:800px; height:600px; border:2px double grey; margin:10px auto;}
    #p1{transition:all 1s linear; position:absolute; transform:translate(15px,510px); width:120px; height:90px;}
    #p2{transition:all 1s linear; position:absolute; transform:translate(145px,510px); width:120px; height:90px;}
    #p3{transition:all 1s linear; position:absolute; transform:translate(275px,510px); width:120px; height:90px;}
    #p4{transition:all 1s linear; position:absolute; transform:translate(405px,510px); width:120px; height:90px;}
    #p5{transition:all 1s linear; position:absolute; transform:translate(535px,510px); width:120px; height:90px;}
    #p6{transition:all 1s linear; position:absolute; transform:translate(665px,510px); width:120px; height:90px;}
    #p1:hover{ transform:translate(0px,0px); z-index:5; width:800px; height:600px;}
    #p2:hover{ transform:translate(0px,0px); z-index:5; width:800px; height:600px;}
    #p3:hover{ transform:translate(0px,0px); z-index:5; width:800px; height:600px;}
    #p4:hover{ transform:translate(0px,0px); z-index:5; width:800px; height:600px;}
    #p5:hover{ transform:translate(0px,0px); z-index:5; width:800px; height:600px;}
    #p6:hover{ transform:translate(0px,0px); z-index:5; width:800px; height:600px;}
    --></style>
    L'encadrement du cadre "fd" est facultatif; il peut être rempli d'une image ou d'une texture.
    Chaque vignette est déplacé horizontalement, par rapport à la précédente (130px) et l'agrandissement est le même pour chaque vignette.
    Cet exemple ne comporte que des photos en 800x600px mais on peut placer des vignettes de 450x600px, en faisant attention à ce que le curseur reste sur la vignette, à l'agrandissement, en la positionnant plus centrée.